<template>
  <z-card :title="title" :icon="icon">
    <div class="nav jc-between mb-3">
      <div
        class="nav-item"
        :class="{ active: active === i }"
        v-for="(c, i) of categories"
        :key="i"
        @click="$refs.newsSwiper.swiper.slideTo(active = i)"
      >
        <div class="nav-link">{{ c.name }}</div>
      </div>
    </div>
    <div class="content">
      <swiper ref="newsSwiper" :options="swiperOption"  @slide-change="()=> (active = $refs.newsSwiper.swiper.realIndex)">
        <swiper-slide v-for="(c, i) in categories" :key="i">
          <slot name="items" :category="c"></slot>
        </swiper-slide>
      </swiper>
    </div>
  </z-card>
</template>

<script>
export default {
  props: {
    icon: { type: String, required: true },
    title: { type: String, required: true },
    categories: { type: Array, required: true }
  },
  data () {
    return {
      active: 0,
      swiperOption: {
        autoHeight: true,
        on: {
          // slideChange: () => (this.active = this.$refs.newsSwiper.swiper.realIndex)
        }
      }
    }
  },
  methods: {
    // slideToIndex (i) {
    //   this.$refs.newsSwiper.swiper.slideTo(this.active = i)
    // }
  }
}
</script>

<style>
</style>
